<template>
  <view class="hpv-img">
    <image
      src="https://qita-1252107261.cos.ap-chengdu.myqcloud.com/yiliao/gongjinai.jpg"
      mode="aspectFill"
    ></image>
  </view>
  <!-- 筛选导航 -->
  <view class="tab-view">
    <view
      class="tab-toggle"
      v-for="(item, index) in hpvNav"
      :key="item._id"
      @click="selectData(index, item._id)"
    >
      <text>{{ item.name }}</text>
      <text :class="index == activeIndex ? 'checked' : ''"></text>
    </view>
  </view>

  <!-- HPV疫苗列表 -->
  <view
    class="hpv-list"
    v-for="(item, index) in hpvList"
    :key="item._id"
    @click="goDesc(index)"
  >
    <view>
      <view class="hpv-type">{{ item.name }}</view>
      <view class="hpv-age">
        <text v-for="(m, i) in item.describe" :key="i">{{ m }}</text>
      </view>
      <view class="hpv-price">¥{{ item.price[0] }}-¥{{ item.price[1] }}</view>
    </view>
    <view class="hpv-reserve">去预约</view>
  </view>

  <!-- 高度 -->
  <view style="height: 300rpx"></view>
  <!-- 骨架屏 -->
  <!-- <skIndex v-if="skeLeton"></skIndex> -->
</template>
  
<script setup lang="ts">
// 1.引入基础模块
import { onMounted, reactive, toRefs } from "vue";
import { reqOtuhpv } from "@/serve/api";
import { hpvDataType, hpvNavType } from "@/types/index";

// 2.定义页面响应式数据
let pageData = reactive({
  hpvData: [] as hpvDataType[], //全部的HPV列表数据
  hpvList: [] as hpvDataType[], //筛选后的数据
  hpvNav: [] as hpvNavType[], //筛选导航标题数据
  activeIndex: 0, //默认筛选导航下标
});

// 3.批量解构导出响应式数据
let { hpvData, hpvList, hpvNav, activeIndex } = toRefs(pageData);

// 4.获取页面列表数据
onMounted(async () => {
  let { data } = await reqOtuhpv();
  // console.log(data)
  pageData.hpvData = data[0].hpv_list;
  pageData.hpvNav = data[0].hpv_select;
  pageData.hpvList = data[0].hpv_list;
});

// 5.实现hpv筛选
function selectData(index: number, id: string) {
  pageData.activeIndex = index; //同步默认选中的导航下标
  let list = pageData.hpvData.filter((item) => item.hpv_id == id); //过滤疫苗数据
  pageData.hpvList = list.length > 0 ? list : pageData.hpvData; //赋值(注意全部没有数据id)
}

// 6.跳转到hpv疫苗详情应用页面
function goDesc(index: number) {
  uni.navigateTo({
    url: "./hpvDesc?value=" + JSON.stringify(pageData.hpvList[index]),
  });
}
</script>
  
  
<style>
page {
  background-color: #fafafa;
}

.hpv-img {
  height: 350rpx;
}

.hpv-img image {
  height: 350rpx;
  width: 100%;
  display: block;
}

/* tab切换 */
.tab-view {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #ffffff;
}

.tab-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100rpx;
  justify-content: center;
  position: relative;
}

.checked {
  width: 50rpx;
  height: 8rpx;
  background-color: #0d7cff;
  position: absolute;
  bottom: 0;
}

/* 疫苗列表 */
.hpv-list {
  background-color: #ffffff;
  margin: 20rpx;
  padding: 20rpx;
  display: flex;
  justify-content: space-between;
  border-radius: 20rpx;
}

.hpv-type {
  font-size: 35rpx;
}

.hpv-age {
  display: flex;
  align-items: center;
}

.hpv-age text {
  background-color: #f4f6fa;
  padding: 7rpx;
  font-size: 25rpx;
  margin: 10rpx 10rpx 10rpx 0;
}

.hpv-price {
  font-weight: bold;
  color: #ff5f2c;
}

.hpv-reserve {
  align-self: flex-end;
  background-color: #0d7cff;
  padding: 15rpx 30rpx;
  border-radius: 40rpx;
  color: #ffffff;
}
</style>